<template>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'tabBar'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="btn-area">
			<onekit-button @Tap="setTabBarBadge">{{ !hasSetTabBarBadge ? '设置tab徽标' : '移除tab徽标' }}</onekit-button>
			<onekit-button @Tap="showTabBarRedDot">{{ !hasShownTabBarRedDot ?  '显示红点' : '移除红点'}}</onekit-button>
			<onekit-button @Tap="customStyle">{{ !hasCustomedStyle ? '自定义Tab样式' : '移除自定义样式'}}</onekit-button>
			<onekit-button @Tap="customItem">{{ !hasCustomedItem ? '自定义Tab信息' : '移除自定义信息' }}</onekit-button>
			<onekit-button @Tap="hideTabBar">{{ !hasHiddenTabBar ? '隐藏TabBar' : '显示TabBar' }}</onekit-button>
		</onekit-view>
		<onekit-view onekit-class="btn-area">
			<onekit-button type="primary" @Tap="navigateBack">返回上一级</onekit-button>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../../page/common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../../page/common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "component": true,
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../../weixin2vue/wx.js';
import Macro from '../../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../../weixin2vue/OnekitComponent.js';
const defaultTabBarStyle = {
    "color":'#7A7E83',
    "selectedColor":'#3cc51f',
    "backgroundColor":'#ffffff'
};
const defaultItemName = '接口';
export default Component(ONEKIT_JSON,["hasSetTabBarBadge","hasShownTabBarRedDot","hasCustomedStyle","hasCustomedItem","hasHiddenTabBar"],ONEKIT_SJS,{
    "data":{
        "hasSetTabBarBadge":false,
        "hasShownTabBarRedDot":false,
        "hasCustomedStyle":false,
        "hasCustomedItem":false,
        "hasHiddenTabBar":false
},
    "attached"(){
      wx.pageScrollTo({
        "scrollTop":0,
        "duration":0
});
    },
    "detached"(){
      this.removeTabBarBadge();
      this.hideTabBarRedDot();
      this.showTabBar();
      this.removeCustomStyle();
      this.removeCustomItem();
    },
    "methods":{
        "navigateBack"(){
          this.triggerEvent('unmount');
        },
        "setTabBarBadge"(){
          if(this.data.hasSetTabBarBadge)
          {
            this.removeTabBarBadge();
            return;
          };
          this.setData({
            "hasSetTabBarBadge":true
});
          wx.setTabBarBadge({
            "index":1,
            "text":'1'
});
        },
        "removeTabBarBadge"(){
          this.setData({
            "hasSetTabBarBadge":false
});
          wx.removeTabBarBadge({
            "index":1
});
        },
        "showTabBarRedDot"(){
          if(this.data.hasShownTabBarRedDot)
          {
            this.hideTabBarRedDot();
            return;
          };
          this.setData({
            "hasShownTabBarRedDot":true
});
          wx.showTabBarRedDot({
            "index":1
});
        },
        "hideTabBarRedDot"(){
          this.setData({
            "hasShownTabBarRedDot":false
});
          wx.hideTabBarRedDot({
            "index":1
});
        },
        "showTabBar"(){
          this.setData({
            "hasHiddenTabBar":false
});
          wx.showTabBar();
        },
        "hideTabBar"(){
          if(this.data.hasHiddenTabBar)
          {
            this.showTabBar();
            return;
          };
          this.setData({
            "hasHiddenTabBar":true
});
          wx.hideTabBar();
        },
        "customStyle"(){
          if(this.data.hasCustomedStyle)
          {
            this.removeCustomStyle();
            return;
          };
          this.setData({
            "hasCustomedStyle":true
});
          wx.setTabBarStyle({
            "color":'#FFF',
            "selectedColor":'#1AAD19',
            "backgroundColor":'#000000'
});
        },
        "removeCustomStyle"(){
          this.setData({
            "hasCustomedStyle":false
});
          wx.setTabBarStyle(defaultTabBarStyle);
        },
        "customItem"(){
          if(this.data.hasCustomedItem)
          {
            this.removeCustomItem();
            return;
          };
          this.setData({
            "hasCustomedItem":true
});
          wx.setTabBarItem({
            "index":1,
            "text":'API'
});
        },
        "removeCustomItem"(){
          this.setData({
            "hasCustomedItem":false
});
          wx.setTabBarItem({
            "index":1,
            "text":defaultItemName
});
        }
}
});

</script>
<style 
 lang="css">
@import '/page/common/lib/weui.css';
@import '/app.css';
.weui-label {
  width: 5em ;
}
</style>